<template>
    <Card dis-hover :bordered="false">
        <jg-Search
            :searchData="searchData"
            @on-enter-input="askDatakeyword"
            @on-clear-input="askDatakeyword"
            @on-change-change="askDatanow"
            @on-change-date="askDataing"
            @on-open-change-change="askDataopen"
        ></jg-Search>
        <div class="i-table-no-border">
            <Table
                highlight-row
                ref="table"
                :columns="columns"
                :loading="loading"
                :data="data"
                @on-sort-change="sortchange"
            >
                <template slot-scope="{ row }" slot="info">
                    <a @click="handleDetailPatient(row)"
                        >{{ row.name }} {{ row.gender_str }} {{ row.age }}岁</a
                    >
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <a
                        v-hasC="{
                            name: 'v1-patient-index-edit-info',
                            flag: 'v1/patient/index/edit-info',
                        }"
                        @click="handleOpenDrawer(row)"
                        >编辑</a
                    >
                </template>
                <template slot-scope="{ row }" slot="state">
                    <Tag v-if="row.status_name === '失效'" color="blue">{{
                        row.status_name
                    }}</Tag>
                    <Tag
                        v-else-if="row.status_name === '跟进中'"
                        color="volcano"
                        >{{ row.status_name }}</Tag
                    >
                    <Tag v-else-if="row.status_name === '预约'" color="cyan">{{
                        row.status_name
                    }}</Tag>
                    <Tag v-else-if="row.status_name === '到诊'" color="green">{{
                        row.status_name
                    }}</Tag>
                    <Tag
                        v-else-if="row.status_name === '已到老患者'"
                        color="orange"
                        >{{ row.status_name }}</Tag
                    >
                    <Tag v-else-if="row.status_name" color="orange">{{
                        row.status_name
                    }}</Tag>
                </template>
                <template slot-scope="{ row }" slot="label">
                    <Poptip
                        word-wrap
                        trigger="hover"
                        placement="right"
                        maxWidth="400"
                    >
                        <Tag
                            color="default"
                            v-for="(item, index) in row.patient_tags_name_arr"
                            :key="index"
                            v-if="index < 3"
                            >{{ item.replace(/[\r\n]/g, "") }}</Tag
                        >
                        <div slot="content">
                            <Tag
                                color="default"
                                v-for="(item,
                                index) in row.patient_tags_name_arr"
                                :key="index"
                                >{{ item.replace(/[\r\n]/g, "") }}</Tag
                            >
                        </div>
                    </Poptip>
                </template>
                <template slot-scope="{ row }" slot="disease">
                    <span>{{ row.patient_diseases_name }}</span>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page
                    show-total
                    show-elevator
                    show-sizer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="changepage"
                    @on-page-size-change="changepageSize"
                />
            </div>
        </div>
        <patient-detail
            ref="patientDetail"
            :btnShow="btnShow"
            @cancelDrawer="askData"
        />
        <edit-patient ref="editPatient" @patientfun="askData" v-if="!loading" />
    </Card>
</template>

<script>
import jgSearch from "@/components/search";
import mixins from "@/mixins/mixins";
import editPatient from "@/components/editPatient";
import patientDetail from "@/components/patientDetail";

import { patientmarketpatientlist } from "@/api/hqapi/indexone.js";
export default {
    /*  import引入的组件注入到components对象中使用  */
    components: { patientDetail, editPatient, jgSearch },
    mixins: [mixins],
    data() {
        return {
            btnShow: [
                {
                    name: "v1-patient-index-sub",
                    flag: "v1/patient/index/sub",
                },
                {
                    name: "v1-patient-index-edit-remark",
                    flag: "v1/patient/index/edit-remark",
                },
                {
                    name: "v1-patient-index-update3",
                    flag: "v1/patient/index/update",
                },
                {
                    name: "v1-patient-callback-callback-common-list",
                    flag: "v1/patient/callback/callback-common-list",
                },
                {
                    name: "v1-patient-index-edit-tags",
                    flag: "v1/patient/index/edit-tags",
                },
                {
                    name: "v1-patient-index-edit-tags2",
                    flag: "v1/patient/index/edit-tags",
                },
            ],
            searchData: {
                project: [
                    {
                        id: 1,
                        key: "DatePicker",
                        style: { width: "200px" },
                        value: ["", ""],
                        type: "daterange",
                        callback: "date",
                        placeholder: "请选择创建日期",
                    },
                    {
                        id: 2,
                        key: "Input",
                        style: { width: "260px" },
                        value: "",
                        placeholder: "请输入姓名/手机号/微信号",
                        clearable: true,
                        callback: "input",
                    },
                    {
                        id: 3,
                        key: "Select",
                        style: { width: "118px" },
                        value: "",
                        field: { value: "value", label: "label" },
                        childList: [],
                        clearable: true,
                        type: "daterange",
                        callback: "change",
                        placeholder: "患者状态",
                    },
                    {
                        id: 4,
                        key: "Select",
                        style: { width: "118px" },
                        value: "",
                        field: { value: "value", label: "label" },
                        childList: [],
                        clearable: true,
                        type: "daterange",
                        Group: true,
                        callback: "change",
                        placeholder: "归属人",
                    },
                    {
                        id: 5,
                        key: "TreeSelect",
                        style: { width: "118px" },
                        value: "",
                        field: { value: "value", label: "label" },
                        childList: [],
                        clearable: "clearable",
                        type: "daterange",
                        callback: "change",
                        placeholder: "病种",
                    },
                    // {
                    //   id: 6,
                    //   key: "Select",
                    //   style: { width: "118px" },
                    //   value: "",
                    //   field: { value: "value", label: "label" },
                    //   childList: [],
                    //   clearable: "clearable",
                    //   type: "daterange",
                    //   callback: "change",
                    //   placeholder: "地区",
                    // },
                    // {
                    //   id: 7,
                    //   key: "Select",
                    //   style: { width: "118px" },
                    //   value: "",
                    //   field: { value: "value", label: "label" },
                    //   childList: [],
                    //   clearable: "clearable",
                    //   type: "daterange",
                    //   callback: "change",
                    //   placeholder: "医院",
                    // },
                    // {
                    //   id: 8,
                    //   key: "Select",
                    //   style: { width: "118px" },
                    //   value: "",
                    //   field: { value: "value", label: "label" },
                    //   childList: [],
                    //   clearable: "clearable",
                    //   type: "daterange",
                    //   callback: "change",
                    //   placeholder: "医生",
                    // },
                    {
                        id: 6,
                        key: "TreeSelect",
                        style: { width: "118px" },
                        value: "",
                        childList: [],
                        clearable: true,
                        callback: "change",
                        placeholder: "医生",
                    },
                ],
            },
            data: [],
            keywordbool: false,
            params: {
                page: 1,
                pageSize: 10,
                start_time: "",
                end_time: "",
                keywords: "",
                patient_status_id: "",
                belong_member_id: "",
                diseases_id: "",
                market_channel_id: "",
                sort_appointment_time: 0,
                sort_callback_count_type: 0,
            },
            columns: [
                {
                    title: "基本信息",
                    key: "basic",
                    slot: "info",
                    width: 160,
                    fixed: "left",
                },
                { title: "患者状态", key: "state", slot: "state", width: 100 },
                { title: "归属人", key: "belong_member_name", width: 120 },
                {
                    title: "预到时间",
                    key: "appointment_time",
                    sortable: "custom",
                    width: 120,
                },
                {
                    title: "回访次数",
                    key: "callback_count",
                    sortable: "custom",
                    width: 120,
                },
                { title: "患者标签", key: "label", slot: "label", width: 268 },
                {
                    title: "市场来源渠道",
                    key: "market_name",
                    width: 190,
                    ellipsis: true,
                    tooltip: true,
                },
                { title: "病种", slot: "disease", width: 100 },
                { title: "创建时间", key: "created_at", width: 135 },
                {
                    title: "备注",
                    minWidth: 150,
                    key: "remark",
                    ellipsis: true,
                    tooltip: true,
                },
                { title: "操作", width: 90, slot: "action", fixed: "right" },
            ], // 列表表头
        };
    },
    /* 函数方法集合 */
    methods: {
        /* @函数功能: 初始化 */
        initial() {
            this.funaskData = patientmarketpatientlist;
            this.askData();
        },
        /* @函数功能: 请求数据 */
        askDatas(res) {
            this.data = res.list.list;
            this.total = res.list.total;
            this.searchData.project.forEach((item) => {
                if (item.id === 3) {
                    if (item.childList.length === 0)
                        item.childList = res.patient_status;
                } else if (item.id === 4) {
                    if (item.childList.length === 0)
                        item.childList = res.member_list;
                } else if (item.id === 5) {
                    if (item.childList.length === 0)
                        item.childList = res.diseases_list;
                } else if (item.id === 6) {
                    if (item.childList.length === 0)
                        item.childList = res.source_channel_list;
                }
            });
        },
        askDatakeyword() {
            this.keywordbool = true;
            (this.params = {
                page: 1,
                pageSize: 10,
                start_time: "",
                end_time: "",
                keywords: "",
                patient_status_id: "",
                belong_member_id: "",
                diseases_id: "",
                market_channel_id: "",
                sort_appointment_time: 0,
                sort_callback_count_type: 0,
            }),
                this.searchData.project.forEach((item) => {
                    if (item.id === 2) {
                        this.params.keywords = item.value;
                    } else if (item.id === 1) {
                        item.value = ["", ""];
                    } else {
                        item.value = "";
                    }
                });
            this.askData();
        },
        askDatanow() {
            if (!this.keywordbool) {
                this.params.page = 1;
                this.searchData.project.forEach((item) => {
                    if (item.id === 3) {
                        this.params.patient_status_id = item.value;
                    } else if (item.id === 4) {
                        this.params.belong_member_id = item.value;
                    } else if (item.id === 5) {
                        this.params.diseases_id = item.value;
                    } else if (item.id === 6) {
                        this.params.market_channel_id = item.value;
                    }
                });
                this.askData();
            }
        },
        askDataing() {
            this.searchData.project.forEach((item) => {
                if (item.id === 1) {
                    this.params.start_time = item.value[0];
                    this.params.end_time = item.value[1];
                }
            });
            this.askDatanow();
        },
        askDataopen() {
            this.keywordbool = false;
        },
        sortchange(e) {
            if (e.key === "appointment_time") {
                if (e.order === "desc") {
                    this.params.sort_appointment_time = 2;
                } else if (e.order === "asc") {
                    this.params.sort_appointment_time = 1;
                } else {
                    this.params.sort_appointment_time = 0;
                }
                this.params.sort_callback_count_type = 0;
            } else if (e.key === "callback_count") {
                if (e.order === "desc") {
                    this.params.sort_callback_count_type = 2;
                } else if (e.order === "asc") {
                    this.params.sort_appointment_time = 1;
                } else {
                    this.params.sort_appointment_time = 0;
                }
                this.params.sort_appointment_time = 0;
            }
            this.askData();
        },

        handleDetailPatient(row) {
            this.$refs.patientDetail.handleOpen(row);
        },
        handleOpenDrawer(row) {
            if (row === -1) this.$refs.editPatient.handleOpenDrawer();
            else this.$refs.editPatient.handleEdit(row);
        },
    },
};
</script>

<style lang="less" scoped></style>
